<template>
 <div ref="fullscreen" class="box" style="">
     <div @click="$emit('closeShowVideo')" class="iconClose">
         <i style="font-size:20px;color:white;line-height: 50px;" class="el-icon-close"></i>
     </div>
     <video v-isShowVideo v-if="videoSrc.includes('http')" style="width:50%;margin-left:50%;margin-top:5%;transform: translateX(-50%);" controls autoplay :src="videoSrc"></video>
     <video v-else style="width:50%;margin-left:50%;margin-top:5%;transform: translateX(-50%);" controls autoplay src="http://vjs.zencdn.net/v/oceans.mp4"></video>
 </div>
</template>
<script>
export default {
  name: '',
  props: {
    videoSrc: {
      type: String
    }
  },
  data () {
    return {

    }
  },
  directives: {
    isShowVideo: {
      inserted: function (el) {
        el.onerror = function () {
          el.src = 'http://vjs.zencdn.net/v/oceans.mp4'
        }
      }
    }
  },
  created () {
    console.log(this.videoSrc, 'videoSrc')
  },
  mounted () {
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style  scoped>
.box{
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 100000;

}
.iconClose{
    display:flex;
    justify-content: center;
    width:50px;
    height:50px;
    border-radius: 50% 50%;
    margin-left:50%;
    margin-top: 2%;
    transform: translateX(-50%);
    background:rgba(0,0,0,0.5);
}
</style>
